<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/goods.css">
    <link rel="stylesheet" href="../css/reset.css">
</head>
<body>
    <header></header>
    <section>
        <div id="top">
            <div class="top-con">
                <div class="left">
                    <img src="../image/71596708931610769517.png" alt="">
                </div>
               <div class="middle">
                    <ul>
                            <li><a href="#">全部分类</a></li>
                            <li><a href="#">荣耀Magic V</a></li>
                            <li><a href="#">荣耀60系列</a></li>
                            <li><a href="#">开学季</a></li>
                            <li><a href="#">荣耀数码</a></li>
                    </ul>
               </div>
                <div class="right">
                    <input type="text" placeholder="手机">
                </div>
                
            </div>
            
        </div>
        <div id="goods">
            <div class="top">
                <a href="#">首页</a>
                <span></span>
                <a href="#">平板</a>
                <span></span>
                <a href="#">荣耀X系列</a>
                <span></span>
                <b>荣耀平板 X7 WIFI 3GB+32GB 深海蓝 儿童版</b> 
            </div>
            <div class="bottom">
                <div class="left">
                    <div id="small-box">
                        <div id="mask"></div>
                        <div id="big-box" ></div>
                    </div>
                    <div id="foot">
                        <!-- <ul>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                            <li><img src="" alt=""></li>
                        </ul> -->
                    </div>
                </div>
                <div class="right">
                    <h2 ></h2>
                    <div class="box">
                        <p><span>价格</span><b class="price"></b > <del>￥999.00</del></p>
                        <p><span>优惠券</span><strong>满1000减100</strong><a href="#">立即领取 ></a></p>
                        <p><span>促销</span><i class="fir">限时特价</i><em>限时优惠200元</em>
                        <p><i>一站式换新</i><em>APP专项，最高补贴500元</em>
                        <p><i>积分红包</i><em>数码超品日享双倍积分抵现，最高50元</em>
                        <p><i>赠送积分</i><em>购买即赠商城积分，积分可抵现~</em></p>
                    </div>
                    <div class="on">
                        <p><span>服务说明</span>
                            <i>广东>深圳 >龙岗区<select>
                                <option value=""></option>
                                <option value=""></option>
                            </select></i>
                            
                            <b><strong>现货,</strong>明天21:59前付款，预计2月22日（周二）送达</b><br><em><u></u> 已满48元以免运费</em><em><u></u> 由荣耀商城负责发货，并提供售后咨询服务</em></p>
                        <p><span>商品编码</span><b>2701010137002</b></p>
                    </div>
                    <div class="bottom">
                        <p><span>选择颜色</span><em><u></u><a href="#">深海蓝</a></em></p>
                        <p><span>选择版本</span><b>WIFI 3GB+32GB</b>
                        <b>WIFI 3GB+32GB 儿童版</b></p>
                        <p><span>选择套餐</span><b>官方标配</b></p>
                        <p><span>已选择商品:</span><i>深海蓝/WIFI 3GB+32GB 儿童版/官方标配</i></p>
                    </div>
                    <div class="go">
                        <b><em class="em">1</em><i>+</i><strong>_</strong></b>
                        <span class="buy">加入购物车</span>
                        <a>立即下单</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="pic">
            <p><img src="../image/3D5FA2B12DDBB5B63C990E1FE1B265026137C23D5A539127.jpg" /></p>
            <p><img src="../image/C99534D279EF1F3BE65998AB5EE57DCA5B5BC8288909E4E9.jpg" /></p>
            <p><img src="../image/B7590EE6F53EB65D306C52D1D3F704F8EBCF80EFE9613B47.jpg" /></p>
            <p><img src="../image/7D38944812C2FC16FAB81D514CCD52669356E4C448F2F32C.jpg" /></p>
            <p><img src="../image/3CEB09344BB5C97B3BD161FD94F921E575764EFB2548E117.jpg" /></p>
            <p><img src="../image/9906FE400839EB13C19DEAB585908668EFCCD8F78805EC56.jpg" /></p>
            <p><img src="../image/C7E5382DF012126D45CB9BD9F7C9554CE5586700C428388A.jpg" /></p>
        </div>
        <!-- <div id="aside">
            <ul>
                <li><i></i><a href="#">以旧换新</a></li>
                <li><b></b><a href="#">二维码</a></li>
                <li><em></em><a href="#">购物车</a></li>
                <li><strong></strong><a href="#">在线客服</a></li>
                <li><u></u><a href="#">自助服务</a></li>
            </ul>
        </div> -->
    </section>
    <footer></footer>
</body>
</html>
<script src="../js/jQuery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");
</script>
<script src="../js/goods.js"></script>
<script>
    let smallBox = document.getElementById("small-box");
    let mask = document.getElementById("mask");
    let bigBox = document.getElementById("big-box");
    let lis = document.getElementsByTagName("li");
    let img = document.getElementsByTagName("img");
    let mg = new Magnifier(smallBox, mask, bigBox, lis, img);
    mg.eventBind();
</script>
<script>
    console.log(location.search.split("=")[1]);
    let id = location.search.split("=")[1];
    $.get("../goodsAndShoppingCart/getGoodsInfo.php",{
        goodsId :id,
    },function(data){
        let arr = JSON.parse(data);
        
        console.log(arr);
        let str = '';
        $("#small-box").css({
                backgroundImage:`url(${arr.goodsImg})`,
        });
        $("#big-box").css({
                backgroundImage:`url(${arr.goodsImg})`,
        });
            str += `<ul  class="item>
                            <li class="lis"><img src="../image/${arr.beiyong7}" alt=""></li>
                            <li class="lis"><img src="../image/${arr.beiyong8}" alt=""></li>
                            <li class="lis"><img src="../image/${arr.beiyong9}" alt=""></li>
                            <li class="lis"><img src="../image/${arr.beiyong10}" alt=""></li>
                            <li class="lis"><img src="../image/${arr.beiyong11}" alt=""></li>
                </ul>`
        ;
        $("#foot").html(str);
        $(".lis").mouseover(function(){
            $("#small-box").css({
                backgroundImage:`url(${$(this).find("img").attr("src")})`,
            });
            $("#big-box").css({
                backgroundImage:`url(${$(this).find("img").attr("src")})`,
            });

        });      
        
        
       $("h2").html(`${arr.beiyong6}`)
       $(".price").html(`${arr.beiyong13}`)  
       $(".bottom:u").css({
            backgroundImage:`url(${arr.beiyong7})`,
       })
                
    });
    let count = $(".em").html();
    console.log(count)
    $(".buy").click(function(){
        $.post("../goodsAndShoppingCart/addShoppingCart.php",{
            vipName:localStorage.getItem("username"),
            goodsId:id,
            goodsCount:count
        },function(data){
            console.log(data)
            location.href = "car.html?id="+id;
        });
    });
</script>